<!--
  @author:  long
  @date:    2023/3/7
  @file:    概况信息
  @require:
-->
<template>
  <div>
    <div v-for="(item, index) in overviewData" class="mb-5" :key="index">
      <el-descriptions :column="column" border>
        <template #title>
          <el-row>
            <el-col :span="12">
              <!--          <div class="text-gray-600 text-sm">-->
              <!--            <i class="i-bi-bookmarks-fill"></i>-->
              <!--            {{ item.title }}-->
              <!--          </div>-->
              <TitleName
                :title="item.title"
                icon="i-carbon-bookmark-filled"
              ></TitleName>
            </el-col>
            <el-col :span="12" class="text-right">
              <el-button link size="small">
                {{ item.handleTitle }}
                <el-icon>
                  <ArrowRight />
                </el-icon>
              </el-button>
            </el-col>
          </el-row>
        </template>
        <el-descriptions-item
          v-for="(t, i) in item.list"
          :key="i"
          :label="t.label"
          label-align="right"
          label-class-name="w-3/24"
          class-name="w-9/24"
        >
          <!--      所属行业        -->
          <template v-if="t.prop === 'industryTypeCode'">
            <dict-tag
              :options="industry_category"
              :value="overviewInfo[t.prop]"
            />
          </template>
          <!--      尊称        -->
          <template v-else-if="t.prop === 'sex'">
            <dict-tag :options="sys_user_sex" :value="overviewInfo[t.prop]" />
          </template>

          <!--      联系人角色        -->
          <template v-else-if="t.prop === 'roleCode'">
            <dict-tag :options="contacts_role" :value="overviewInfo[t.prop]" />
          </template>
          <!--      纳税人性质        -->
          <template v-else-if="t.prop === 'taxGrade'">
            <dict-tag :options="tax_grade" :value="overviewInfo[t.prop]" />
          </template>
          <!--      星级        -->
          <template v-else-if="t.prop === 'starRating'">
            <el-rate disabled v-model="overviewInfo[t.prop]" />
          </template>
          <!--      来源        -->
          <template v-else-if="t.prop === 'origin'">
            <dict-tag
              :options="customer_source"
              :value="overviewInfo[t.prop]"
            />
          </template>
          <!--      状态        -->
          <template v-else-if="t.prop === 'status'">
            <dict-tag
              :options="customer_status"
              :value="overviewInfo[t.prop]"
            />
          </template>
          <!--      职务        -->
          <template v-else-if="t.prop === 'dutyCode'">
            <dict-tag :options="duties_dict" :value="overviewInfo[t.prop]" />
          </template>
          <!--      信用等级        -->
          <template v-else-if="t.prop === 'creditListId'">
            <dict-tag :options="credit_rating" :value="overviewInfo[t.prop]" />
          </template>
          <!--      培训产业类型        -->
          <template v-else-if="t.prop === 'cultivateIndus'">
            <dict-tag
              :options="training_industry"
              :value="overviewInfo[t.prop]"
            />
          </template>
          <!--      是否满25周岁        -->
          <template v-else-if="t.prop === 'isTwentyfive'">
            <dict-tag :options="sys_yes_no" :value="overviewInfo[t.prop]" />
          </template>
          <!--      持有证书        -->
          <template v-else-if="t.prop === 'hasCertificate'">
            <dict-tag
              :options="certificate_name"
              :value="overviewInfo[t.prop]"
            />
          </template>
          <!--      是否入库        -->
          <template v-else-if="t.prop === 'isCollect'">
            <dict-tag :options="library_status" :value="overviewInfo[t.prop]" />
          </template>

          <template v-else>{{ overviewInfo[t.prop] }}</template>
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<script setup name="ContactsOverview">
import { getCurrentInstance } from 'vue'
import { CodeToText } from 'element-china-area-data'

const { proxy } = getCurrentInstance()
const props = defineProps({
  details: {
    type: Object,
    default: () => {
      return {}
    }
  }
})
const column = ref(2)
// 字典 具体查看根目录DICT.md文件
const {
  industry_category,
  contacts_class,
  duties_dict,
  customer_status,
  customer_source,
  contacts_role,
  tax_grade,
  credit_rating,
  sys_user_sex,
  training_industry,
  sys_yes_no,
  library_status,
  certificate_name
} = proxy.useDict(
  'industry_category',
  'contacts_class',
  'duties_dict',
  'customer_status',
  'customer_source',
  'contacts_role',
  'tax_grade',
  'credit_rating',
  'sys_user_sex',
  'training_industry',
  'sys_yes_no',
  'library_status',
  'certificate_name'
)
const data = reactive({
  overviewInfo: {
    khlb: '1',
    sshy: '1',
    khxj: 5,
    khly: '1',
    khzt: '1',
    zw: '1',
    gw: '1'
  },
  overviewData: [
    {
      title: '基本信息',
      handleTitle: '',
      list: [
        { label: '联系人姓名', prop: 'contactName' },
        { label: '关联客户', prop: 'customerName' },
        { label: '尊称', prop: 'sex' },
        { label: '角色', prop: 'roleCode' },
        { label: '职务', prop: 'dutyCode' },
        { label: '手机号码', prop: 'contactNumber' },
        { label: '固定电话', prop: 'telephone' },
        { label: '传真号码', prop: 'fax' },
        { label: '电子邮件', prop: 'email' },
        { label: '微信账号', prop: 'wechat' },
        { label: 'QQ号码', prop: 'qq' },
        { label: '微信昵称', prop: 'wechatName' }
      ]
    },
    {
      title: '详细信息',
      handleTitle: '',
      list: [
        { label: '纳税人性质', prop: 'taxGrade' },
        // { label: '所属企业', prop: 'entId' },
        { label: '归属公司', prop: 'orgName' },
        { label: '角色', prop: 'roleCode' },
        { label: '销售经理', prop: 'userName' },
        { label: '行业类别', prop: 'industryTypeCode' },
        { label: '状态', prop: 'status' },
        { label: '单位所在地区', prop: 'unitAddress' },
        { label: '单位所属行业', prop: 'unitBusiness' },
        { label: '持有证书', prop: 'hasCertificate' },
        { label: '年检年度', prop: 'checkYear' },
        { label: '是否采集入库', prop: 'isCollect' },
        { label: '星级', prop: 'starRating' },
        { label: '来源', prop: 'origin' },
        { label: '信用等级', prop: 'creditListId' },
        { label: '所在城市', prop: 'cityName' },
        { label: '征信积分', prop: 'creditScore' },
        { label: '地址说明', prop: 'addressName' },
        { label: '详细地址', prop: 'address' },
        { label: '备注信息', prop: 'remark' },
        { label: '培训产业类型', prop: 'cultivateIndus' },
        { label: '层次', prop: 'level' },
        { label: '是否满25周岁', prop: 'isTwentyfive' },
        { label: '工作单位', prop: 'workPlace' },
        { label: '籍贯', prop: 'nativePlace' },
        { label: '身份证地址', prop: 'idAddress' },
        { label: '民族', prop: 'nation' },
        { label: '家庭地址', prop: 'familyAddress' },
        { label: '政治面貌', prop: 'politicsFace' },
        { label: '学校名称', prop: 'school' },
        { label: '最高学历', prop: 'education' },
        { label: '有无证件', prop: 'isCert' },
        { label: '学制', prop: 'eduSystem' },
        { label: '毕业时间', prop: 'graduateTime' },
        { label: '学习形式', prop: 'studyForm' },
        { label: '毕业证书编号', prop: 'certNum' }
      ]
    },
    {
      title: '系统信息',
      handleTitle: '',
      list: [
        { label: '系统编号', prop: 'systemNumber' },
        { label: '创建人员', prop: 'createBy' },
        { label: '创建时间', prop: 'createTime' },
        { label: '更新时间', prop: 'updateTime' },
        { label: '最后跟进', prop: '' },
        { label: '下次跟进', prop: '' },
        { label: '最后联系', prop: '' }
      ]
    }
  ]
})
const { overviewData, overviewInfo } = toRefs(data)

watchEffect(() => {
  overviewInfo.value = props.details
  // 转换城市代码
  if (overviewInfo.value.cityCode != null) {
    let arr = overviewInfo.value.cityCode.split(',')
    overviewInfo.value.cityName =
      CodeToText[arr[0]] + '-' + CodeToText[arr[1]] + '-' + CodeToText[arr[2]]
  }
})
</script>

<style scoped lang="scss">
::v-deep .el-descriptions__title {
  width: 100% !important;
}
</style>
